/**
 * 学习目标： 样式处理
 *  1. 行内样式  style={样式对象}，px 单位可以省略
 *  2. 外部样式  引入样式文件，className="类名"
 */

import React from 'react'
import ReactDOM from 'react-dom'
// 引入外部样式表
import './base.css'

const list = [
  { id: 1, name: '刘德华', content: '给我一杯忘情水' },
  { id: 2, name: '五月天', content: '不打扰，是我的温柔' },
  { id: 3, name: '毛不易', content: '像我这样优秀的人' },
]

const containerNode = (
  <>
    <ul className='list'>
      {list.map((item) => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.content}</p>
        </li>
      ))}
    </ul>
  </>
)

ReactDOM.render(containerNode, document.getElementById('root'))
